<!--<template>-->
<!--  <div class="div1">-->
<!--    <el-row class="er1">-->
<!--      <el-col :span="12" class="ec1">-->
<!--        <img src="./recovery.png" width="400" height="400">-->
<!--      </el-col>-->
<!--      <el-col :span="10" class="ec2">-->
<!--&lt;!&ndash;        <el-button class="b1"><h3 style="text-align: center;margin-top: 5px">数 据 恢 复</h3></el-button>&ndash;&gt;-->
<!--        <el-tabs v-model="activeName" @tab-click="handleClick" class="et1">-->
<!--          <el-tab-pane label="管理数据库备份" name="first">-->
<!--            <vxe-table-->
<!--                class="vt"-->
<!--                border="inner"-->
<!--                :show-header="false"-->
<!--                :data="tableData1">-->
<!--              <vxe-column field="name" title="Name" width="300px"></vxe-column>-->
<!--              <vxe-column field="date" title="Date" sortable></vxe-column>-->
<!--              <vxe-column><el-button class="but" @click="backups">恢复备份</el-button></vxe-column>-->
<!--            </vxe-table>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="空间数据库备份" name="second">-->
<!--            <vxe-table-->
<!--                class="vt"-->
<!--                border="inner"-->
<!--                :show-header="false"-->
<!--                :data="tableData2">-->
<!--              <vxe-column field="name" title="Name" width="300px"></vxe-column>-->
<!--              <vxe-column field="date" title="Date" sortable></vxe-column>-->
<!--              <vxe-column><el-button class="but" @click="backups">恢复备份</el-button></vxe-column>-->
<!--            </vxe-table>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="云端管理系统备份" name="third">-->
<!--            <vxe-table-->
<!--                class="vt"-->
<!--                border="inner"-->
<!--                :show-header="false"-->
<!--                :data="tableData3">-->
<!--              <vxe-column field="name" title="Name" width="300px"></vxe-column>-->
<!--              <vxe-column field="date" title="Date" sortable></vxe-column>-->
<!--              <vxe-column><el-button class="but" @click="backups">恢复备份</el-button></vxe-column>-->
<!--            </vxe-table>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  export default {-->
<!--    name: "RecoveryList",-->
<!--    data() {-->
<!--      return {-->
<!--        activeName: 'first',-->
<!--        tableData1: [-->
<!--          {name:'管理数据库备份20220801122432',date:'2020-08-01 12:24:32'},-->
<!--          {name:'管理数据库备份20220801132432',date:'2020-08-01 13:24:32'},-->
<!--          {name:'管理数据库备份20220801142432',date:'2020-08-01 14:24:32'},-->
<!--          {name:'管理数据库备份20220801152432',date:'2020-08-01 15:24:32'},-->
<!--        ],-->
<!--        tableData2: [-->
<!--          {name:'空间数据库备份20220801122432',date:'2020-08-01 12:24:32'},-->
<!--          {name:'空间数据库备份20220801132432',date:'2020-08-01 13:24:32'},-->
<!--          {name:'空间数据库备份20220801142432',date:'2020-08-01 14:24:32'},-->
<!--          {name:'空间数据库备份20220801152432',date:'2020-08-01 15:24:32'},-->
<!--        ],-->
<!--        tableData3: [-->
<!--          {name:'云端管理系统备份20220801122432',date:'2020-08-01 12:24:32'},-->
<!--          {name:'云端管理系统备份20220801132432',date:'2020-08-01 13:24:32'},-->
<!--          {name:'云端管理系统备份20220801142432',date:'2020-08-01 14:24:32'},-->
<!--          {name:'云端管理系统备份20220801152432',date:'2020-08-01 15:24:32'},-->
<!--        ]-->
<!--      };-->
<!--    },-->
<!--    methods: {-->
<!--      backups() {-->

<!--      },-->
<!--      // 选项卡-->
<!--      handleClick(tab, event) {-->
<!--        console.log(tab, event);-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style scoped>-->
<!--  .div1 {-->
<!--    height: 580px;-->
<!--    background-color: #ffffff;-->
<!--  }-->

<!--  .er1 {-->
<!--    margin-top: 100px;-->
<!--    height: 75%;-->
<!--    background-color: #90CCEAFF;-->
<!--  }-->

<!--  .ec1 {-->
<!--    margin-top: 20px;-->
<!--    margin-left: 100px;-->
<!--  }-->
<!--  .ec2 {-->
<!--    margin-top: 50px;-->
<!--  }-->
<!--  .et1 {-->
<!--    width: 600px;-->
<!--  }-->

<!--  .but {-->

<!--  }-->
<!--</style>-->
<template>
  <div class="div1">
    <el-row class="er1">
      <el-col :span="10" class="ec1" style="position: relative">
        <img
            src="./recovery.png"
            width="400"
            height="400"
            style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        />
      </el-col>
      <el-col :span="10" class="ec2">
        <!--        <el-button class="b1"><h3 style="text-align: center;margin-top: 5px">数 据 恢 复</h3></el-button>-->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="et1">
          <el-tab-pane label="管理数据库备份" name="first">
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData1"
            >
              <vxe-column field="name" title="Name" width="300px"></vxe-column>
              <vxe-column field="date" title="Date" sortable></vxe-column>
              <vxe-column
              ><el-button class="but" @click="backups" type="primary"
              >恢复备份</el-button
              ></vxe-column
              >
            </vxe-table>
          </el-tab-pane>
          <el-tab-pane label="空间数据库备份" name="second">
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData2"
            >
              <vxe-column field="name" title="Name" width="300px"></vxe-column>
              <vxe-column field="date" title="Date" sortable></vxe-column>
              <vxe-column
              ><el-button class="but" @click="backups" type="primary"
              >恢复备份</el-button
              ></vxe-column
              >
            </vxe-table>
          </el-tab-pane>
          <el-tab-pane label="云端管理系统备份" name="third">
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData3"
            >
              <vxe-column field="name" title="Name" width="300px"></vxe-column>
              <vxe-column field="date" title="Date" sortable></vxe-column>
              <vxe-column
              ><el-button class="but" @click="backups" type="primary"
              >恢复备份</el-button
              ></vxe-column
              >
            </vxe-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "RecoveryList",
  data() {
    return {
      activeName: "first",
      tableData1: [
        { name: "管理数据库备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "管理数据库备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "管理数据库备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "管理数据库备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
      tableData2: [
        { name: "空间数据库备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "空间数据库备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "空间数据库备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "空间数据库备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
      tableData3: [
        { name: "云端管理系统备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "云端管理系统备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "云端管理系统备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "云端管理系统备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
    };
  },
  methods: {
    backups() {},
    // 选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.div1 {
  height: 580px;
  background-color: #ffffff;
}

.er1 {
  margin-top: 100px;
  height: 75%;
  background-color: #6dbde3;
}

.ec1 {
  height: 100%;
  margin-left: 100px;
}
.ec2 {
  margin-top: 50px;
}
.et1 {
  // width: 600px;
}

.el-tabs {
  ::v-deep.el-tabs__item.is-active {
    color: #005aca;
    font-weight: 700;
  }
}
</style>
